import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Select } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import ProTable from '@ant-design/pro-table';
import styles from './index.less';
import { recodes } from './service'
import { _sendState } from './components/_data'

const SmsManagement = () => {

  const actionRef = useRef();
  const ref = useRef()

  const columns = [
    {
      title: '短信创建人',
      dataIndex: 'sendUser',
      width: 150
    },
    {
      title: '被发送号码',
      dataIndex: 'mobile',
      width: 120
    },
    {
      title: '发送状态',
      dataIndex: 'sendState',
      width: 120,
      renderFormItem: (_, { onChange, value }) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            filterOption={true}
            optionFilterProp="children"
            onChange={onChange}
            value={value ? value : undefined}
          >
            {
              _sendState && _sendState.length && _sendState.map((v, i) => {
                return (
                  <Select.Option key={v.id}>{v.name}</Select.Option>
                )
              })
            }
          </Select>
        );
      },
      hideInTable: true
    },
    {
      title: '短信内容',
      dataIndex: 'msgContent',
      width: 120,
      ellipsis: true,
      hideInSearch: true
    },
    {
      title: '本地发送状态',
      dataIndex: '4',
      width: 120,
      render: (text, record) => (
        <span>{record.sendState}</span>
      ),
      hideInSearch: true
    },
    {
      title: '运营商发送状态',
      dataIndex: 'operatorsSendState',
      width: 180,
      hideInSearch: true
    },
    {
      title: '短信返回码',
      dataIndex: 'sendReturnCode',
      width: 120,
      hideInSearch: true
    },
    {
      title: '发送时间',
      dataIndex: 'sendTime',
      width: 120,
      ellipsis: true,
      hideInSearch: true
    }
  ];

  return (
    <>
      <ProTable
        actionRef={actionRef}
        formRef={ref}
        rowKey="id"
        className={styles.smsManagement}
        headerTitle={
          <div>
            <span style={{ fontWeight: "700", color: "rgba(0,0,0,0.85)", fontSize: '16px' }}>短信数据列表</span>
          </div>
        }
        options={{ fullScreen: true, reload: false, setting: true, density: false }}
        search={{
          span: 6
        }}
        tableAlertRender={false}
        request={params => recodes(params)}
        columns={columns}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) => `第${range[0]}-${range[1]}条 共 ${total} 项`,
          defaultPageSize: 20,
          pageSizeOptions: ['20', '30', '40']
        }}
        scroll={{ x: 900, y: 190 }}
      />
    </>
  );
};

export default Form.create()(SmsManagement);
